*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
//npx sass 黑白小球交替loading效果.scss loading.css
body{
    background: #66c7f4;
}
$ballSize:20px;         //小球尺寸
$containerSize:500px;   //容器尺寸
$n:72;                  //小球数量
$pDeg:360deg/$n;        //每个小球的角度
$d:2s;

.loading{
    width:$containerSize;
    height: $containerSize;
    margin:50px auto;
    position: relative;
    border-radius: 50%;
    // outline: 1px solid #fff;
    .dot{
        position: absolute;
        left: 50%;
        top: 0;
        width: $ballSize;
        height: $ballSize;
        margin-left: -$ballSize/2;
        margin-top: -$ballSize/2;
        perspective: 70px;
        // background-color: rgb(255, 16, 16);
        perspective: 70px;
        transform-style: preserve-3d;
        transform-origin: center $containerSize/2+$ballSize/2;
        @for $i from 1 through $n{
            &:nth-child(#{$i}){
                transform: rotate($pDeg * ($i - 1));
                &::before,&::after{
                    animation-delay: - $d / $n * ($i - 1)*6;
                }
            }
           
        }
        &::before,&::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        &::before{
            background-color: #fff;
            top: 100%;
            animation: rotation-white $d infinite;
            @keyframes rotation-white {
                0%{
                    animation-timing-function:ease-in;
                }
                25%{
                    transform: translate3d(0,-100%,-$ballSize);
                    animation-timing-function:ease-out;
                }
                50%{
                    transform: translate3d(0,-200%,0);
                    animation-timing-function:ease-in;
                }
                75%{
                    transform: translate3d(0,-100%,$ballSize);
                    animation-timing-function:ease-out;
                }
            }
        }
        &::after{
            background-color: #000;
            top: -100%;
            animation: rotation-black $d infinite;
            @keyframes rotation-black {
                0%{
                    animation-timing-function:ease-in;
                }
                25%{
                    transform: translate3d(0,100%,$ballSize);
                    animation-timing-function:ease-out;
                }
                50%{
                    transform: translate3d(0,200%,0);
                    animation-timing-function:ease-in;
                }
                75%{
                    transform: translate3d(0,100%,-$ballSize);
                    animation-timing-function:ease-out;
                }
            }
        }
    }
}